<template>
  <div class="login">
    <el-container>
      <el-main>
        <div>
          <el-card style="width: 600px;height: 300px;margin: 20vh auto;background-color: rgba(255,255,255,0.35)">
            <el-form label-width="60px" style="width: 500px;margin:10px auto">
              <h1 style="text-align: center">宝格丽酒店客房管理系统</h1>
              <el-form-item label="账号" style="margin: 20px auto">
                <el-input type="text" placeholder="请输入管理账号" v-model="input" style="width: 420px;"></el-input>
              </el-form-item>
              <el-form-item label="密码" style="margin: 20px auto">
                <el-input type="password" placeholder="请输入密码" v-model="user.password"style="width: 420px;"  show-password></el-input>
              </el-form-item>
              <el-form-item style="text-align: center;margin: 30px auto;">
                <el-button style="margin-right: 50px;" @click="LoginBackstage">登录</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      userShow:false,
      passShow:false,
      input: "",
      user: {
        username: "",
        password: "",
        checkPass: "",
        tel: "",
        mail: "",
        agree: ""
      }
    }
  },
  methods: {
    VIPLogin() {
      let telExp = new RegExp("^1[3578]\\d{9}$");//手机号码验证
      let usernameExp = new RegExp("/^[a-zA-Z0-9_-]{4,16}$/");//手机号码验证
      let mailExp = new RegExp(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/);
      if (usernameExp.test(v.input)) {
        v.user.username = v.input
      } else if (telExp.test(v.input)) {
        v.user.tel = v.input
      } else if (mailExp.test(v.input)) {
        v.user.mailExp = v.input
      }
    },

    handleSelect(key, keyPath) {
      console.log(key)
    },
    travelLogin() {
      location.href = "/index.html"
    },
    LoginBackstage(){
      location.href = "/roomManagement.html"
    }
  }
}
</script>
<style>
body{
  background-color: seagreen;
}
</style>


